<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <script src="../echarts/echarts.min.js"></script>
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();
            $.ajax({
                url: "../echarts/selfRange",    //请求发送到TestServlet处
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    var data = result.data;
                    let scorelist = data.scores;
                    let ranklist = data.ranks;

                    console.log(scorelist);
                    myChart.hideLoading();    //隐藏加载动画
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    myChart.setOption({
                        xAxis: {
                            type: 'category',
                            data: ranklist
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: scorelist,
                            type: 'line',
                            smooth: true
                        }]
                    })
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            })
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: 1,
            })
        })
    </script>
</body>
</html>